<template>
  <h2 style="color: #35984b; height: 40px; margin: 20px 0; text-align: center;">垃圾分类展示</h2>
  <hr style="margin-bottom: 20px;">
  <!--垃圾信息展示-->
  <el-row>
    <el-col :span="4" v-for="p in showGarbageArr" style="padding: 2px;">
      <el-card>
        <img :src="p.url" style="width: 100%; height: 180px;">
        <p style="float: left; color: #666; font-size: 15px; font-weight: bold;">{{p.garbageName}}</p>
        <!--使用不同颜色的标签显示垃圾的类别-->
        <el-tag
            :type="getTagType(p.category)"
            class="category-tag"
            effect="dark"
            @click="showCategoryInfo(p.category)"
            style="cursor: pointer;"
        >
          {{p.category}}
        </el-tag>
      </el-card>
    </el-col>
  </el-row>
  <div style="display:flex; justify-content: center; margin: 50px 0;">
    <el-button @click="dialogVisible=true" class="link" underline="never" style="color: #fff; background-color: orangered;">投放垃圾</el-button>
  </div>

  <!-- 投放垃圾弹窗 -->
  <el-dialog
      title="投放垃圾"
      style="width:400px;padding:40px;"
      v-model="dialogVisible"
  >
    <el-form label-position="left" label-width="80">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="垃圾名称">
            <el-input placeholder="请输入垃圾名称" v-model="saveRecordForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="垃圾类别">
            <el-select placeholder="请选择垃圾类别" v-model="saveRecordForm.category">
              <el-option label="可回收垃圾" value="可回收垃圾"></el-option>
              <el-option label="有害垃圾" value="有害垃圾"></el-option>
              <el-option label="厨余垃圾" value="厨余垃圾"></el-option>
              <el-option label="其他垃圾" value="其他垃圾"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="垃圾数量">
            <el-input-number :min="1" v-model="saveRecordForm.num"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" @click="dialogVisible = false">取消</el-button>
        <el-button type="success" @click="saveRecord">确认投放</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 垃圾类别信息弹窗 -->
  <el-dialog
      v-model="categoryDialogVisible"
      :title="currentCategory"
      width="550px"
      class="category-dialog"
  >
    <div class="category-content" v-html="categoryInfo[currentCategory]"></div>
    <template #footer>
      <el-button
          type="success"
          @click="categoryDialogVisible = false"
          style="width: 120px;"
      >
        我知道了
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

// 垃圾类别信息
const categoryInfo = {
  '可回收垃圾': `
    <h3>可回收垃圾</h3>
    <p>可回收物是指适宜回收利用和资源化利用的生活废弃物。</p>
    <p><strong>主要包括：</strong></p>
    <ul>
      <li>废纸张：报纸、书本、纸箱等</li>
      <li>废塑料：塑料瓶、塑料玩具等</li>
      <li>废玻璃制品：玻璃瓶、玻璃杯等</li>
      <li>废金属：易拉罐、金属餐具等</li>
      <li>废织物：衣服、床上用品等</li>
    </ul>
    <p><strong>投放要求：</strong></p>
    <ul>
      <li>轻投轻放</li>
      <li>清洁干燥，避免污染</li>
      <li>废纸尽量平整</li>
      <li>立体包装物请清空内容物，清洁后压扁投放</li>
    </ul>
  `,
  '有害垃圾': `
    <h3>有害垃圾</h3>
    <p>有害垃圾是指对人体健康或者自然环境造成直接或者潜在危害的生活废弃物。</p>
    <p><strong>主要包括：</strong></p>
    <ul>
      <li>废电池：充电电池、纽扣电池等</li>
      <li>废荧光灯管：节能灯、荧光灯管等</li>
      <li>废药品及其包装物</li>
      <li>废油漆和溶剂及其包装物</li>
      <li>废杀虫剂、消毒剂及其包装物</li>
    </ul>
    <p><strong>投放要求：</strong></p>
    <ul>
      <li>投放时请注意轻放</li>
      <li>易破损的请连带包装或包裹后轻放</li>
      <li>如易挥发，请密封后投放</li>
    </ul>
  `,
  '厨余垃圾': `
    <h3>厨余垃圾</h3>
    <p>厨余垃圾是指居民日常生活及食品加工、饮食服务、单位供餐等活动中产生的垃圾。</p>
    <p><strong>主要包括：</strong></p>
    <ul>
      <li>食材废料：谷物、蔬菜、肉类等</li>
      <li>剩菜剩饭</li>
      <li>过期食品</li>
      <li>瓜皮果核</li>
      <li>茶渣、中药渣等</li>
    </ul>
    <p><strong>投放要求：</strong></p>
    <ul>
      <li>纯流质的食物垃圾，如牛奶等，应直接倒进下水口</li>
      <li>有包装物的厨余垃圾应将包装物去除后分类投放</li>
      <li>投放时应沥干水分</li>
    </ul>
  `,
  '其他垃圾': `
    <h3>其他垃圾</h3>
    <p>其他垃圾是指除可回收物、有害垃圾、厨余垃圾以外的其他生活废弃物。</p>
    <p><strong>主要包括：</strong></p>
    <ul>
      <li>餐巾纸、卫生纸等受污染无法再生利用的纸张</li>
      <li>烟蒂</li>
      <li>尘土</li>
      <li>一次性餐具</li>
      <li>陶瓷碎片</li>
    </ul>
    <p><strong>投放要求：</strong></p>
    <ul>
      <li>尽量沥干水分</li>
      <li>难以辨识类别的生活垃圾投入其他垃圾容器内</li>
    </ul>
  `
};

// 垃圾类别弹窗相关
const categoryDialogVisible = ref(false);
const currentCategory = ref('');

// 显示垃圾类别信息
const showCategoryInfo = (category) => {
  currentCategory.value = category;
  categoryDialogVisible.value = true;
};

// 投放弹窗相关
const dialogVisible = ref(false);

const user = ref(getUser());
const saveRecordForm  = ref({
  name: '',
  category: '',
  num: '',
  img: '',
  userId: user.value.id,
  status: 10
});
const saveRecord = () => {
  if (!saveRecordForm.value.name) {
    ElMessage.error('请填写垃圾名称');
    return;
  }
  if (!saveRecordForm.value.category) {
    ElMessage.error('请选择垃圾类别');
    return;
  }
  console.log(saveRecordForm.value);
  let data = qs.stringify(saveRecordForm.value);
  // console.log(data);
  axios.post('http://localhost:8080/v1/record/save',data)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success(`成功投放 ${saveRecordForm.value.num} 份 ${saveRecordForm.value.name}`);
          dialogVisible.value = false;
          saveRecordForm.value = {};
        }else{
          ElMessage.error(response.data.msg);
        }
      })
};

// 根据垃圾类别返回对应的标签类型
const getTagType = (category) => {
  switch(category) {
    case '可回收垃圾': return 'primary';
    case '有害垃圾': return 'danger';
    case '厨余垃圾': return 'success';
    case '其他垃圾': return 'info';
    default: return '';
  }
};
const showGarbageArr = ref([
  {garbageName: "废纸", category: "可回收垃圾", url: "/imgs/user/put-1.png"},
  {garbageName: "旧衣服", category: "可回收垃圾", url: "/imgs/user/put-2.png"},
  {garbageName: "废弃电池", category: "有害垃圾", url: "/imgs/user/put-3.png"},
  {garbageName: "塑料瓶", category: "可回收垃圾", url: "/imgs/user/put-4.png"},
  {garbageName: "菜叶子", category: "厨余垃圾", url: "/imgs/user/put-5.png"},
  {garbageName: "烟头", category: "其他垃圾", url: "/imgs/user/put-6.png"}
]);
</script>

<style scoped>
.category-tag {
  float: right;
  font-size: 14px;
  margin: 15px 0;
  padding: 5px;
}
.link {
  background-color: #35984b;
  margin: 5px;
  width: 120px;
  font-size: 17px;
  text-color: #fff;
  padding: 5px 0;
}

:deep(.category-dialog) {
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

:deep(.category-dialog .el-dialog__header) {
  border-bottom: 1px solid #e8f4ea;
  margin-right: 0;
  padding: 15px 20px;
  background: linear-gradient(to right, #f8fbf8, #e8f4ea);
  border-radius: 12px 12px 0 0;
}

:deep(.category-dialog .el-dialog__title) {
  color: #35984b;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

:deep(.category-dialog .el-dialog__body) {
  padding: 0;
}

.category-content {
  padding: 20px 30px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 0 0 12px 12px;
}

.category-content h3 {
  color: #35984b;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px dashed #e0e0e0;
}

.category-content p {
  margin: 15px 0;
  line-height: 1.8;
  color: #444;
  font-size: 15px;
}

.category-content strong {
  color: #35984b;
  font-weight: bold;
}

.category-content ul {
  padding-left: 25px;
  margin: 15px 0;
  list-style-type: none;
}

.category-content li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: #555;
  position: relative;
  padding-left: 20px;
  font-size: 14px;
}

.category-content li:before {
  content: "•";
  color: #35984b;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: -1px;
}

/* 滚动条样式 */
.category-content::-webkit-scrollbar {
  width: 8px;
}

.category-content::-webkit-scrollbar-thumb {
  background-color: rgba(53, 152, 75, 0.5);
  border-radius: 4px;
}

.category-content::-webkit-scrollbar-thumb:hover {
  background-color: #35984b;
}

.category-content::-webkit-scrollbar-track {
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  :deep(.category-dialog) {
    width: 90% !important;
  }

  .category-content {
    padding: 15px;
  }
}
</style>